<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      //2010-2023年销售额 (万元)
      const data = [
          {year:'2010',value:100},
          {year:'2011',value:150},
          {year:'2012',value:200},
          {year:'2013',value:220},
          {year:'2014',value:170},
          {year:'2015',value:190},
          {year:'2016',value:80},
          {year:'2017',value:320},
          {year:'2018',value:280},
          {year:'2019',value:130},
          {year:'2020',value:180},
          {year:'2021',value:240},
          {year:'2022',value:70},
          {year:'2023',value:300}
      ] 
      const keys = data.map(d=>d.year) ;

      const width = 800 ;
      const height = 600 ;
      const margin = 100 ;
      const innerWidth = width - margin*2 ;
      const innerHeight = height - margin*2 ;

      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      const x = d3.scaleBand()
        .domain(keys)
        .range([margin,innerWidth+margin])
        .padding(0.2)

      const y = d3.scaleLinear()
        .domain([0,d3.max(data,d=>d.value)])
        .range([innerHeight , 0])
        .nice()
        
      const c = d3.scaleOrdinal()
        .domain(keys)
        .range(d3.schemeSet3)  


      const xAxis = d3.axisBottom(x) ;

      const yAxis = d3.axisLeft(y) ;


      svg.append('g').attr('transform',`translate(${margin},${margin})`)
        .call(yAxis)

      const gx = svg.append('g').attr('transform',`translate(0,${innerHeight+margin})`)  
        .call(xAxis)
      
      const rects = svg.append('g').attr('transform',`translate(0,${margin})`)
        .selectAll('rect')
        .data(data)
        .join('rect')
        .attr('x',d=>x(d.year))
        .attr('y',d=>y(0))
        .attr('width',x.bandwidth())
        .attr('height',0)
        .attr('fill',d=>c(d.year))

      //绘制标题
      svg.append('text')
        .attr('x',width/2)
        .attr('y',margin/2)
        .text('2020-至今 年销售额(万元)')
        .attr('font-size',20)
        .attr('text-anchor','middle')

      
      svg.append('text')
        .attr('x',width/2)
        .attr('y',height - margin/2)
        .text('年份')
        .attr('font-size',14)
        .attr('text-anchor','middle')

        
      svg.append('text')
        .attr('x',margin/2)
        .attr('y',height/2)
        .text('销售额')
        .attr('font-size',14)
        .attr('text-anchor','middle')
        .style('writing-mode','tb')

      //绘制动画，交互
      
      //增加tip
      const tip = d3.tip()
        .html((e,d)=>d.value)
        .attr('class','d3-tip')
        .offset([-10,0])
        
      svg.call(tip)
      
      rects.on('mouseover',tip.show)
           .on('mouseout',tip.hide)


      let time = rects.size()     
      //设置矩形动画     
      rects.transition('a')
        .duration(1000)
        .delay((d,i)=>i*200)
        .attr('y',d=>y(d.value))
        .attr('height',d=>y(0)-y(d.value))
        .on('end',() => {
          time-- ;
        })

      //设置滚动放缩
      const zoom = d3.zoom()
        .scaleExtent([1,2])
        .extent([ [margin,0],[width,0] ])
        .translateExtent([ [margin,0],[width,0] ])
        .on('zoom',(e,d)=>{
          //判断rects之前的动画是否已经完结
          if(time != 0)
            return  ;

          const t = d3.transition()
            .duration(1000)

           x.range( [margin,innerWidth+margin].map(d=>e.transform.applyX(d)) );
           rects
            .transition(t)
            .attr('x',d=>x(d.year))
            .attr('width',x.bandwidth())
           gx
            .transition(t)
            .call(xAxis)
        })
      svg.call(zoom)

    </script>
    
  </body>
</html>
